<template>
    <view class="box">
		<view class="box-bg">
			<view class="wallet-card">
			    <view class="lable"><span>账户余额</span></view>
			    <view class="money"><span>¥</span>{{total}}</view>
				<view class="hismoney">
					<view class="box-1">
						<view class="hisnumber">
							{{balanceInfo.available_predeposit}}
						</view>
						<view class="histext">
							可用余额
						</view>
					</view>
					<view class="box-1">
						<view class="hisnumber">
							{{balanceInfo.freeze_predeposit}}
						</view>
						<view class="histext">
							冻结余额
						</view>
					</view>
				</view>
			    <view class="wallet-but">
			        <view class="but-1" @click="toUrl(0)">
			            充值
			        </view>
			        <view class="but-1" @click="toUrl(1)">
			            提现
			        </view>
			    </view>
			</view>
		</view>
        <view class="wallet-bg">
            <view class="tab">
                <view class="tab-1" :class="activeIndex==0?'active':''" @click="tabChange(0)">收入</view>
                <view class="tab-1" :class="activeIndex==1?'active':''" @click="tabChange(1)">支出</view>
            </view>
        </view>
       <view class="box-list" v-if="activeIndex==0">
           <view class="box-list-1" v-for="(item,index) in listAdd" :key="index">
               <view class="left">
                   <view class="content">
                       <view class="text">{{item.lg_desc}}</view>
                   </view>
       			<view class="time">{{item.lg_add_time|formaDate}}</view>
               </view>
               <view class="right">
                   <view class="num">+{{item.lg_av_amount}}￥</view>
               </view>
           </view>
       	<view v-if="listAdd.length<=0" class="None">
       		<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
       	</view>
       </view>
       <view class="box-list" v-if="activeIndex==1">
           <view class="box-list-1" v-for="(item,index) in listSub" :key="index">
               <view class="left">
                   <view class="content">
                       <view class="text">{{item.lg_desc}}</view>
                   </view>
       			<view class="time">{{item.lg_add_time|formaDate}}</view>
               </view>
               <view class="right">
                   <view class="num num2">{{item.lg_av_amount}}￥</view>
               </view>
           </view>
       	<view v-if="listSub.length<=0" class="None">
       		<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
       	</view>
       </view>
    </view>
</template>

<script>
    export default {
    	data() {
    		return {
				base_url:this.$base_url,
                activeIndex:0,
                total:0,
                curpage:1,
				balanceInfo:{},
                list:[],
                listAdd:[],
                listSub:[],
				height: 88,
				top: 20,
				hasmore:false
            };
    	},
		onLoad(){
			// this.getWallet()
			// this.getBalance()
		},
        onShow(){
			this.getWallet()
			this.getBalance()
			uni.getSystemInfo({
			    success: res => {
			        this.top = res.statusBarHeight;
			    }
			});
        },
        onReachBottom() {
			if (this.hasmore) {
				this.curpage++;
				this.getWallet();
			}else{
				uni.showToast({
					icon:"none",
					title:'已是最后一页！'
				})
			}
        },
		watch:{
		},
    	methods: {
			toLeft() {
			    uni.navigateBack({
			        delta:1,
			        fail() {
			            uni.switchTab({
			                url:'/main/home/index'
			            })
			        }
			    })
			},
            tabChange(index){
				if(this.activeIndex==index){
					return
				}
				this.curpage=1;
                this.activeIndex=index;
				this.list=[]
				this.listAdd=[]
				this.listSub=[]
                this.getWallet();
            },
            /**
             * @param {Object} index 0 充值 1 提现
             */
            toUrl(index){
                if(index==0){
                    uni.navigateTo({
                        url:'/member/wallet/recharge'
                    })
                }else{
                    uni.navigateTo({
                        url:'/member/wallet/withdrawal'
                    })
                }
            },
			//获取用户余额信息
			getBalance(){
				this.$util.request({
					url: '/mobile/index.php?act=member_index&op=getMemberBalance',
					method: 'get',
					data: {}
				}).then(res=>{
					if(res.error_code==0){
						this.balanceInfo=res.datas.balance_info
						this.total=0
						this.total=this.balanceInfo.available_predeposit*1+this.balanceInfo.freeze_predeposit*1
					}
				})
			},
            /**
             * 获取预存款明细
             */
            getWallet(state=false){
				let that =this
                that.$util.request({
                	url: '/mobile/index.php?act=predeposit&op=yck_list',
                	method: 'get',
                	data: {
                        curpage:that.curpage,
                        business:that.activeIndex+1,
						pagesize:20
                    }
                }).then(res => {
                	if (res.error_code == 0) {
						console.log(JSON.parse(JSON.stringify(res.datas.list)))
						if((JSON.parse(JSON.stringify(res.datas.list))).length=0){
							return
						}
						that.hasmore=res.datas.paged.hasmore
						if(state){//列表数据
							that.list = that.list.concat(JSON.parse(JSON.stringify(res.datas.list))) 
						}else{
							this.list=[]
							this.listAdd=[]
							this.listSub=[]
							that.list = JSON.parse(JSON.stringify(res.datas.list))
						}
						if(that.hasmore){
						    that.curpage++;
							that.getintegral(state=true)
						}else{
							that.list.forEach(item=>{
								if(item.lg_av_amount.indexOf('-')==0){
									that.listSub.push(item)
								}else{
									that.listAdd.push(item)
								}
							})
						}
                        
                	} else {
                		uni.showToast({
                			title: res.message,
                			icon: "none"
                		})
                	}
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    page{
        background-color: #FFF;
    }
    .box{
        .wallet-bg {
            
            .tab{
                display: flex;
                justify-content: space-between;
                padding: 20rpx 128rpx 30rpx;
                .tab-1{
                    font-size: 32rpx;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #909090;
                }
                .active{
                    font-size: 32rpx;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #323232;
                    position: relative;
					color: #E96A1D;
                }
                .active::after{
                    position: absolute;
                    content: '';
                    left: 20%;
                    bottom: -10rpx;
                    width: 40rpx;
                    height: 4rpx;
                    background: #E96A1D;
                    border-radius: 3rpx;
                }
            }
        }
        .box-list{
            display: flex;
            flex-direction: column;
            padding: 0 30rpx;
            // height: 300rpx;
            overflow-y: auto;
            .box-list-1{
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 30rpx 0;
                border-bottom: 2rpx solid #EEEEEE;
                .left{
                    display: flex;
					flex-direction: column;
                    .add{
                        width: 66rpx;
                        height: 66rpx;
                        image{
                            width: 66rpx;
                            height: 66rpx;
                        }
                    }
                    .content{
                        .text{
                            font-size: 28rpx;
                            font-family: PingFang SC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #323232;
                        }
                        .time{
                           font-size: 24rpx;
                           font-family: PingFang SC-Regular, PingFang SC;
                           font-weight: 400;
                           color: #909090; 
                        }
                    }
                }
                .time{
                   font-size: 24rpx;
                   font-family: PingFang SC-Regular, PingFang SC;
                   font-weight: 400;
                   color: #909090; 
                }
                .right{
                    .num{
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #E24B15;
                    }
                    .num2{
                        font-size: 28rpx;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #373737;
                    }
                }
            }
        }
    }
	.box-bg {
	    width: 100%;
	    height: 460rpx;
	    background: linear-gradient(315deg, #EA8C1E 0%, #E84A1D 100%);
	    border-radius: 0rpx 0rpx 0rpx 0rpx;
	    opacity: 1;
	    position: relative;
	    .order-stutas-box{
	        display: flex;
	        align-items: center;
	        position: absolute;
	        left: 30rpx;
	        right: 30rpx;
	        bottom: 124rpx;
	        .order-icon{
	            width: 80rpx;
	            height: 80rpx;
	            image{
	                width: 80rpx;
	                height: 80rpx;
	            }
	        }
	        .order-icon-1{
	            margin-left: 30rpx;
	            .order-icon-2{
	                font-size: 40rpx;
	                font-family: PingFang SC-Semibold, PingFang SC;
	                font-weight: 600;
	                color: #FFFFFF;
	            }
	            .order-icon-3{
	                font-size: 28rpx;
	                font-family: PingFang SC-Regular, PingFang SC;
	                font-weight: 400;
	                color: #FFFFFF;
	            }
	        }
	    }
	}
	.tui-header-box {
		position: fixed;
		left: 30rpx;
	    right: 0;
		top:40rpx;
		z-index: 9995;
	    display: flex;
	    align-items: center;
		.tui-header-icon {
			image {
			    width: 307rpx;
			    height: 30rpx;
			}
		}
	    .header-text{
	        width: 100%;
	        font-weight: 500;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	        .header-name {
	            font-size: 36rpx;
	            font-family: PingFang SC-Semibold, PingFang SC;
	            font-weight: 600;
	            color: #FFFFFF;
	            padding-right: 36rpx;
	        }
	    }
	}
	.wallet-card{
	    padding: 20rpx;
		position: absolute;
		left: 30rpx;
		right: 30rpx;
	    .lable{
	        font-size: 34rpx;
	        font-family: PingFang SC-Regular, PingFang SC;
	        font-weight: 400;
	        color: #FFFFFF;
			display: flex;
			justify-content: space-between;
	    }
	    .money{
	        display: flex;
	        justify-content: center;
	        margin: 39rpx 0 53rpx;
	        font-size: 60rpx;
	        font-family: PingFang SC-Regular, PingFang SC;
	        font-weight: 400;
	        color: #FFFFFF;
			line-height: 1;
			align-items: flex-end;
			letter-spacing: 3rpx;
			span{
				 font-size: 30rpx;
			}
	    }
		.hismoney{
			display: flex;
			justify-content: center;
			text-align: center;
			.box-1{
				flex: 1;
				.hisnumber{
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 3rpx;
			}
			.histext{
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			}
			
		}
	    .wallet-but {
	        padding: 0 80rpx;
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
			margin-top: 42rpx;
	        .but-1{
	          font-size: 24rpx;
	          font-family: PingFang SC-Regular, PingFang SC;
	          font-weight: 400;
	          color: #FFFFFF;
			  width: 200rpx;
			  height: 60rpx;
			  background: rgba(255,255,255,.2);
			  border-radius: 50rpx 50rpx 50rpx 50rpx;
			  text-align: center;
			  line-height: 60rpx;
	        }
	    }
	}
</style>